<template>
    <div class="content">
        <div class="header">
            <p class="title">药品详情</p>
        </div>
        <div class="body">
            <div class="search">
                <div>
                    <label for="">药品名称：</label><input type="text">
                    <label for="">药品id：</label><input type="text">
                </div>
                <div>
                    <button class="button" @click="search">搜索</button>
                    <button class="button" @click="search">添加药品</button>
                </div>
            </div>
            <div class="drugs_details">
                <div class="pager_content">
                    <table class="patient-data"  v-if="drugs_details">
                        <tr><td class="key">药品id:</td><td @blur="td_change($event,1)" id="id">{{ drugs_details.id }}</td></tr>
                        <tr><td class="key">药品名称:</td><td @blur="td_change($event,1)" class="value" id="name">{{ drugs_details.name }}</td></tr>
                        <tr><td class="key">药品类型:</td><td @blur="td_change($event,1)" class="value" id="type">{{ drugs_details.type }}</td></tr>
                        <tr><td class="key">库存:</td><td @blur="td_change($event,1)" class="value" id="stock">{{ drugs_details.stock }}</td></tr>
                        <tr><td class="key">价格(元):</td><td @blur="td_change($event,1)" class="value" id="price">{{ drugs_details.price }}</td></tr>
                        <tr><td class="key">单位:</td><td @blur="td_change($event,1)" class="value" id="unit">{{ drugs_details.unit }}</td></tr>
                        <tr><td class="key">适应症状:</td><td @blur="td_change($event,1)" class="value" id="adaptive_symptoms">{{ drugs_details.adaptive_symptoms }}</td></tr>
                        <tr><td class="key">主要功效:</td><td @blur="td_change($event,1)" class="value" id="effect">{{ drugs_details.effect }}</td></tr>
                        <tr><td class="key">用法用量:</td><td @blur="td_change($event,1)" class="value" id="use_dose">{{ drugs_details.use_dose }}</td></tr>
                        <tr><td class="key">生产日期:</td><td @blur="td_change($event,1)" id="produce_date"><span v-show="!submitShow">{{ drugs_details.produce_date }}</span><input v-show="submitShow" class="value" v-model="drugs_details.produce_date" type="date" name="" id=""></td></tr>
                        <tr><td class="key">有效期:</td><td @blur="td_change($event,1)" id="effective_date"><span v-show="!submitShow">{{ drugs_details.effective_date }}</span><input v-show="submitShow" class="value" v-model="drugs_details.effective_date" type="date" name="" id=""></td></tr>
                    </table>
                </div>
                <div class="button" v-if="drugs_details">
                    <button class="edit" @click="edit($event)">{{ button_text }}</button>
                    <button v-show="submitShow" class="submit" @click="submit">提交</button>
                    <button class="back" @click="$router.push('/drugs_list')">返回列表</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'drugs_list',
    data(){
        return {
            drugs_details:null,
            button_text:'编辑信息',
            submitShow:false,
            params_id:null
        }
    },
    methods:{
        edit(e){
            let el = document.querySelectorAll(".value")
            if(this.button_text=='编辑信息'){
                this.button_text='取消'
                this.submitShow=!this.submitShow
                el.forEach(item=>{
                    item.setAttribute("contentEditable",this.submitShow)
                })
                el[0].focus()
            }else{
                this.button_text='编辑信息'
                this.submitShow=!this.submitShow
                this.update_patient()
                el.forEach(item=>{
                    item.setAttribute("contentEditable",this.submitShow)
                })
            }
        },
        show_details(){
            // 根据病人id来查看病历信息
            if(this.medical_record_item==null){
                this.$toast("请先选择你要查看的病历")
                return
            }

            this.$router.push(`/medical_record_details/${this.medical_record_item.patient_id}`)
        },
        current_drugs(item,index){
            this.current_drugs_item=item
            this.current_drugs_index=index
            // this.$store.state.global_var.select_medical_record={
            //     item:item,
            //     index:index
            // }  // 全局保存下
        },
        td_change(el,num){  // 输入病历信息后，保存病历信息
            if(num==0){
                this.patient.medical_record[index][0](0,1,el.currentTarget.innerHTML.trim())
                let e = el.currentTarget
                let id = e.getAttribute("id")
                this.patient.medical_record[index][id]=e.innerHTML.trim()
            }else if(num==1){
                let e = el.currentTarget
                let id = e.getAttribute("id")
                this.drugs_details[id]=e.innerHTML.trim()
            }
        },
        check_data(data){  // 检查输入的信息是否正确,这个组件没用到，留着备用
            
            for (let item in data){
                if (data[item] instanceof Array){
                    let temp = data[item]
                    for(let i in temp){
                        let ret = this.check_data(temp[i])
                        if(ret==false){
                            return false
                        }
                    }
                }
                if(this.$my_tools.check_data[item]){ 
                    
                    let msg=this.$my_tools.check_data[item](data[item])
                    if(msg){
                        this.$toast(msg)
                        this.err_msg=msg
                        this.err_msg_show=true
                        return false
                    }
                }
            }
        },
        submit(){  // 提交编辑后的信息
            // if(this.check_data(this.drugs_details)==false){
            //     return
            // }
            // document.querySelectorAll(".edit")[0].innerText="编辑信息"
            // this.submitShow=false
            let conf = confirm("你确定要保存该编辑吗")
            if(!conf){
                console.log("取消编辑");
                return
            }
            this.button_text='编辑信息'
            this.submitShow=!this.submitShow
            let values = document.querySelectorAll(".value")
            values.forEach((item,index)=>{
                item.setAttribute("contentEditable",this.submitShow)
            })

            // 发送ajax请求，保存数据
            console.log(this.drugs_details,"提交");
            this.$http({
                method:'post',
                url:'/ajax/api/edit_drugs',
                data:{
                    drugs_details:this.drugs_details
                }
            }).then(data=>{
                console.log(data.data);
                if(data.data=="ok"){
                    this.$toast.success("编辑成功")
                    let indxe = this.$store.state.drugs_list[this.query.reques_count].drugs_list.findIndex((item)=>{return item.id==this.query.drugs_id})
                    this.$store.state.drugs_list[this.query.reques_count].drugs_list[indxe]=this.drugs_details
                    this.$router.push('/drugs_list')
                    // this.$store.state.drugs_list[this.params_id]=this.drugs_details
                    
                }else{
                    this.$toast.fail("编辑失败，发生未知错误")
                }
            })
            // this.$store.state.patient[0]=this.$my_tools.deepClone(this.patient)
        },
        update_patient(){
            this.query = this.$route.query
            let temp = this.$my_tools.deepClone(this.$store.state.drugs_list[this.query.reques_count].drugs_list)
            this.drugs_details = temp.find((item)=>{return item.id==this.query.drugs_id})
        },
    },
    mounted(){
        this.query = this.$route.query
        let temp = this.$my_tools.deepClone(this.$store.state.drugs_list[this.query.reques_count].drugs_list)
        this.drugs_details = temp.find((item)=>{return item.id==this.query.drugs_id})
        // this.params_id = this.$route.params.id
        // if(this.$store.state.drugs_list){
        //     this.drugs_details=this.$my_tools.deepClone(this.$store.state.drugs_list[this.params_id])
        // }
    }
}
</script>

<style lang='scss' scoped>
.content{
    margin: 5px;
    .title{
        font-weight: bolder;
        margin:10px 0;
        text-align: center;
    }
    .search{
        display: flex;
        align-items: center;
        .button{
            margin-left: 5px;
        }
    }

    .drugs_details{
        margin-top: 10px;
        display: flex;
        // flex-direction: column;
        // align-items:flex-start;
        // 表格样式
        table{
            flex:0 0 auto;
            tr,td{
                border: 1px solid #aaa;
                vertical-align: middle;
                padding: 8px;
                // max-width: 150px;
                // white-space: nowrap;
                overflow: hidden;
                
            }
            tr{
                // background-color: rgb(253, 255, 250);
            }
            .tb_header{
                font-weight: bolder;
                background-color: rgb(213, 219, 203);
            }
            .select{
                background-color: rgb(233, 235, 230);
            }
            .key{
                font-weight: bolder;
                width: 100px;
            }
            .value{
                // width: 200px;
                word-break: break-all;
                width: 800px;
                max-width: 800px;
            }
        }
        .button{
            display: flex;
            margin-left: 10px;
            flex-direction: column;
            // position:absolute;
            // top: 15px;
            // right: 5px;
            // flex:1;
            button{
                margin-bottom: 10px;
                width: 80px;
                // text-align:ce;
                // background-color: rgb(245, 159, 102);
                // color: rgb(247, 238, 201);
            }
        }
        
        .pager{
            margin: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            a{
                margin:0 5px;
                // color:rgb(105, 119, 243);
            }
            .active{
                color:red;
            }
        }
    }
    

}
</style>